<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的旅游(待出行)</title>  
    <link rel="stylesheet" href="../libs/mui/mui.css" />
	<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../css/main.css"/>	
	<style>				
		/*图片*/
		.mui-content{font-size: 16px;}
		b{color: #ff043f;}
		.mui-table-view-cell>a:not(.mui-btn){white-space:normal}
		.mui-table-view .mui-media-object {max-width: 95px;height: 80px;}
		.mui-media-body b{color: #aaa;font-size: 14px;padding: 5px 0;display: block;}
		.mui-input-row label{width: 25%;}
		.mui-input-row label~input{width: 75%;}	
		
		.mui-grid-view.mui-grid-9{background: white;border: none;}
		.mui-grid-view.mui-grid-9 .mui-media{border: none;border-bottom: 1px solid #efeff4;padding: 11px 0px;}		
		/*底部*/
		.mui-bar{line-height: 50px;padding: 0 6px;}			
		.mui-table-view {padding: 5px 0;}			
		.details{color: #AAAAAA;}
		.details li{width: 95%;}
		.total{line-height: 50px;border-top: 1px solid #efeff4;text-align: right;display: none;}
		.total button{width: 80px;line-height: 15px;overflow: hidden;padding: 10px 12px 7px!important;}
		.total span:nth-child(2){display: inline-block;float: right;}
		
		/*支付密码弹窗 start*/
			
			.password-of-pay-wraper {
			  display: none;
			  width: 80%;
			  height: 180px;
			  background-color: #fff;
			  position: fixed;
			  left: 10%;
			  top: 50%;
			  margin-top: -90px;
			  border-radius: 5px;
			  z-index: 1002;
			}
			
			#password_backdrop {
			  position: fixed;
			  z-index: 999;
			  top: 0;
			  right: 0;
			  bottom: 0;
			  left: 0;
			  -webkit-transition-duration: 400ms;
			  -moz-transition-duration: 400ms;
			  transition-duration: 400ms;
			  opacity: 1;
			  -webkit-opacity: 1;
			  -moz-opacity: 1;
			  -khtml-opacity: 1;
			  filter: alpha(opacity=100);
			  background: rgba(0, 0, 0, .4);
			  display: none;
			}
			
			.password-of-pay-top {
			  width: 100%;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  color: #757575;
			  border-bottom: 1px solid #e1e1e1;
			  position: relative;
			}
			
			.password-of-pay-top .close-btn {
			  width: 28px;
			  height: 28px;
			  line-height: 28px;
			  text-align: center;
			  position: absolute;
			  top: 4px;
			  left: 10px;
			  font-size: 16px;
			}
			
			.password-of-pay-body {
			  width: 100%;
			  padding-top: 40px;
			}
			
			.password-of-pay-body form {
			  width: 210px;
			  background-color: #f30;
			  margin: 0 auto;
			  position: relative;
			}
			
			.password-of-pay-body input[type="password"] {
			  float: left;
			  width: 35px;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  font-size: 24px;
			  padding: 0;
			  margin: 0;
			  border-radius: 0;
			}
			
			.password-of-pay-body form input[type="password"]+ input[type="password"] {
			  border-left: 0;
			}
			
			
			/*支付密码弹窗 end*/ 
	</style>
</head>
<body>	
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">详情</h1>
	    <a href="#picture" class="mui-pull-right mui-icon">
	    	<i class="iconfont Siez1">&#xe612;</i>
	    </a>
	</header>	
	<!--底部导航-->
	<nav class="mui-bar mui-bar-tab">
		<div class="mui-col-xs-5 mui-pull-left">
			<span>合计：￥<map class="goods_total">0.00</map></span>							
		</div>
		<!--待付款   10-->
		<div class="mui-col-xs-7 total mui-pull-right">
			<div>
				<button type="button" class="mui-btn Success order_cancel">取消订单</button>
				<button type="button" class="mui-btn Payment RGB payment">付款</button>
			</div>	
		</div>
		<!--待出行  20-->
		<div class="mui-col-xs-7 total mui-pull-right">
			<div>
				<button type="button" class="mui-btn Success order_cancel">取消出行</button>
				<button type="button" class="mui-btn Payment RGB order_complete">完成出行</button>
			</div>	
		</div>
		<!--已取消  30-->
		<div class="mui-col-xs-3 total mui-pull-right">
			<b class="gray">已完成</b>
		</div>
		<!--已取消  40-->
		<div class="mui-col-xs-3 total mui-pull-right">
			<b class="gray">已取消</b>
		</div>
	</nav>
	<div class="mui-content">
		<div class="shopping"> 
			<ul class="mui-table-view Travel">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left goods_image" src="">
						<div class="mui-media-body">
							<div class="mui-ellipsis-2 goods_name"></div>
							<b class="goods_price"></b>
						</div>
					</a>
				</li>
			</ul>		
			<ul class="mui-table-view m3">
				<li class="mui-table-view-cell">
					<span class="travel_type"></span>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span class="travel_time"></span>
				</li>
			</ul>
			<ul class="mui-table-view m3">
				<li class="mui-table-view-cell">						
					<span>出行人：</span>
				</li>
			</ul>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">权志龙</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">成人</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6 mui-ellipsis">441************1569</li>				
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">宋民国</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">学生</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6 mui-ellipsis">441************1569</li>				
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">小晰宝</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">成人</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6 mui-ellipsis">441************1569</li>				-->
			</ul>
			<ul class="mui-table-view m3">
				<li class="mui-table-view-cell">						
					<span class="order_phone"></span>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-input-row">
					<label>备注：</label>
					<input type="text" class="order_message"/>
				</li>
			</ul>
		</div>
	</div>
	<!--/*支付密码弹窗 start*/-->
			<div class="password-of-pay-wraper" id="j_password_of_pay">
				<div class="password-of-pay-top">
					<p>请输入支付密码</p>
					<div class="close-btn" id="j_close_tn">X</div>
				</div>
				<div class="password-of-pay-body">
					<form action="#" class="mui-clearfix">
						<input type="password" id="pwd1" maxlength="1" />
						<input type="password" id="pwd2" maxlength="1" />
						<input type="password" id="pwd3" maxlength="1" />
						<input type="password" id="pwd4" maxlength="1" />
						<input type="password" id="pwd5" maxlength="1" />
						<input type="password" id="pwd6" maxlength="1" />
					</form>		
				</div>
			</div>
			<div id="password_backdrop"></div>
	<!--分享-->
	<div id="picture" class="brand-share mui-popover mui-popover-action mui-popover-bottom" style="height: 100px;">
		<ul class="background table-view">
			<li><i class="iconfont lvs weixin">&#xe609;</i>
				<span>微信</span>
			</li>
			<li><i class="iconfont ify4 qq">&#xe658;</i>
				<span>QQ好友</span>
			</li>
			<li><i class="iconfont lvs friends">&#xe65f;</i>
				<span>朋友圈</span>
			</li>
			<li><i class="iconfont ify3 micro-blog">&#xe661;</i>
				<span>微博</span>
			</li>
		</ul>			
	</div>
</body>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/function.js"></script>
<script type="text/javascript" src="../js/open.js"></script>
<script src="../js/appconfig.js"></script>
<script type="text/javascript" src="../js/web_js/public.js"></script>
<script type="text/javascript" src="../js/web_js/travel_off.js"></script>
<script type="text/javascript" src="../js/web_js/order_pay.js"></script>
<script type="text/javascript" src="../js/web_js/share.js"></script>
 
<script>
//	//	旅行详情
//	$(".Travel").on('tap',function(){
//		openNewPage('Travel_details.html');
//	})
		$("#j_close_tn").on("tap",function (){
			$("#j_password_of_pay").hide();
			tool.shade().hide();
			$('.popover').fadeOut();
			$('#password_backdrop').css("display","none");
		});
</script>
</html>